<template>

    <div class="d1">
        <div class="left">
            <p :style="{ background: bg }">
                {{ circle[num].name }}
            </p>
        </div>
        <div class="right">
            <b>
                {{ title }}
            </b>
            <p>
                <span>{{ type }}</span>
                <span :style="{ color: bg }" class="sp2">{{ circle[num].calculate }} {{ price }}币</span>
            </p>
            <del>
                {{ time }}
            </del>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { onBeforeMount } from 'vue'


const a = defineProps({
    title: {
        type: String,
        default: '的'
    },
    type: {
        type: String,
        default: '我'
    },
    time: {
        type: String,
        default: '22'
    },
    price: {
        type: Number,
        default: 22
    },
    num: {
        type: Number
    }
})

const circle = [
    { name: '收', color: '#3ed2e2', calculate: '+' },
    { name: '支', color: 'red', calculate: '-' },
    { name: '现', color: 'orange', calculate: '-' },
]




let bg = circle[a.num].color


// console.log(bg)


</script>

<style lang="less" scoped>
.d1 {

    width: 90%;
    height: 20vw;
    background-color: white;
    margin: 2.667vw auto 0;
    display: flex;

    .right {
        flex: 1;
        padding-left: 1.333vw;

        // border: 1px solid gray;
        b {
            font-size: 2.667vw;
        }

        p {
            font-size: 2.667vw;
            margin: 1vw 0;
            display: flex;
            justify-content: space-between;
            padding-right: 4vw;
            align-items: center;

            .sp2 {
                font-weight: 700;
                font-size: 4.5vw;
            }

        }

        del {
            font-size: 2.667vw;
            color: rgba(128, 128, 128, 0.682);
        }
    }

    .left {
        height: 100%;
        width: 20vw;
        // border: 1px solid gray;
        display: flex;
        // justify-items: center;
        justify-content: center;
        align-items: center;

        p {
            width: 8vw;
            height: 8vw;
            // background: #3ed2e2;
            border-radius: 50%;
            text-align: center;
            line-height: 8vw;
            color: white;
            font-size: 3vw;
        }
    }
}
</style>